<template>
	<view class="guide uni-flex uni-column justify-align-center" :style="">
		<image :src="imgUrl" mode="aspectFill"></image>
		<view @click="navigateTo" class="passbtn" v-if="imgUrl">{{ content }}</view>
		<!-- <view class="content-wrap uni-flex justify-align-center uni-column"></view> -->
		<!-- 右上角跳过按钮 
		<view class="passbtn" @click.stop="launchApp">跳过</view>-->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '',
				content: '5s',
				totalTime: 5,
				statusBarHeight: 0,
				statusBomHeight: 0,
				clock: null
			}
		},
		onLoad() {
			//this.loading();
		},
		onShow() {
			this.getConfig();
		},
		onHide() {
			clearInterval(this.clock);
		},
		methods: {

			getConfig() {
				uni.showLoading({
					title: "加载中…"
				})
				uni.$u.http.post("/getConfig", {
					id: 1
				}).then((res) => {
					if (res.code == 200) {
						console.log(res);
						// 预加载图片
						uni.getImageInfo({
							src: res.data.site_open,
							success: (ress) => {
								console.log('图片缓存完成', ress.path);
								// 开始读秒
								this.imgUrl = res.data.site_open;
								uni.hideLoading();
								this.getData();
							},
							fail: (err) => {
								console.error('图片加载失败', err);
							}
						});
						uni.setStorageSync('configSite', res.data);
						//this.getUserStatus();
					}
				})
			},

			getData() {
				this.clock = setInterval(() => {
					this.totalTime--;
					this.content = this.totalTime + 's';
					if (this.totalTime == 0) {
						this.launchApp()
					}
				}, 1000);
				console.log(this.clock);
			},

			launchApp() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			navigateTo() {
				//clearInterval(this.clock);
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.guide {
		width: 100%;
		height: 100%;
		position: relative;
		background-size: cover !important;
		background-position: center center !important;
	}

	.guide image {
		width: 100%;
		height: 100vh;
		z-index: 0;
	}

	.passbtn {
		width: 90rpx;
		height: 60rpx;
		line-height: 60rpx;
		position: fixed;
		z-index: 999;
		top: 105rpx;
		left: 50rpx;
		color: #999999;
		text-align: center;
		border-width: 1rpx;
		border-color: rgba(153, 153, 153, 0.5);
		border-style: solid;
		border-radius: 30rpx;
		font-size: 24rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
		z-index: 99;
	}
</style>